<template>
    <div id="types">
        <el-row class="elRow" :gutter="20" style="text-align: left">
            <el-col class="elCol text-right" :span="4">当前类型</el-col>
            <el-col class="elCol" :span="20">
                <el-select v-model="message.type" placeholder="请选择" @change="asdasd">
                    <el-option v-for="item in typeListAll" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row class="elRow" :gutter="20" v-if="message.type===1">
            <el-col class="elCol text-right" :span="4">连接地址</el-col>
            <el-col class="elCol" :span="20">
                <el-input v-model="message.value" placeholder="请输入地址" ></el-input>
            </el-col>
        </el-row>
        <el-row class="elRow" :gutter="20" v-else-if="message.type===10">
            <el-col class="elCol text-right" :span="4">选择类型</el-col>
            <el-col class="elCol text-left" :span="20">
                <el-select v-model="optionsValue" multiple placeholder="请选择"  @change="typeValue">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <!--页面上的分析和课程-->
        <el-row class="elRow" :gutter="20" v-else-if="message.type===11 || message.type===20 || message.type===21">
            <el-col class="elCol text-right" :span="4" v-if="message.type===11">分析信息</el-col>
            <el-col class="elCol text-right" :span="4" v-if="message.type===20">课节信息</el-col>
            <el-col class="elCol text-right" :span="4" v-if="message.type===21">课程信息</el-col>
            <el-col class="elCol" :span="20">
                <el-table :data="analyze" border v-if="analyze">
                    <el-table-column label="ID" width="90">
                        <template slot-scope="scope">
                            <p v-text="scope.row.id"></p>
                        </template>
                    </el-table-column>
                    <el-table-column label="标题" >
                        <template slot-scope="scope">
                            <p v-text="scope.row.title"></p>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="tableDel">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col class="elCol" :span="4"></el-col>
            <el-col class="elCol" :span="16"  v-if="message.type===11">
                <el-select v-model="analyzeAdd" filterable placeholder="请选择" size="100%" :clearable="true" @visible-change="analyzeSize">
                    <el-option v-for="item in analyzeAddList" :key="item.id" :label="item.title" :value="item.id"></el-option>
                </el-select>
            </el-col>
            <el-col class="elCol" :span="16" v-if="message.type===20">
                <el-select v-model="lessonsAdd" filterable placeholder="请选择" size="100%" :clearable="true" @visible-change="lessonsSize">
                    <el-option v-for="val in lessonsAddList" :key="val.id" :label="val.name" :value="val.id"></el-option>
                </el-select>
            </el-col>
            <el-col class="elCol" :span="16" v-if="message.type===21">
                <el-select v-model="courseAdd" filterable placeholder="请选择" size="100%" :clearable="true" @visible-change="courseSize">
                    <el-option v-for="val in courseAddList" :key="val.id" :label="val.name" :value="val.id"></el-option>
                </el-select>
            </el-col>
            <el-col class="elCol" :span="4">
                <el-button class="addButton" @click="analyzeBot" v-if="message.type===11">添加分析</el-button>
                <el-button class="addButton" @click="lessonsBot" v-if="message.type===20">添加课节</el-button>
                <el-button class="addButton" @click="courseBot" v-if="message.type===21">添加课程</el-button>
            </el-col>
        </el-row>
        <el-row class="elRow" :gutter="20" v-else-if="message.type===22">
            <el-col class="elCol text-right" :span="4">课程列表</el-col>
            <el-col class="elCol" :span="20">
                <el-table :data="customAnalyze" border v-if="customAnalyze">
                    <el-table-column label="ID" width="90">
                        <template slot-scope="scope">
                            <p v-text="scope.row.id"></p>
                        </template>
                    </el-table-column>
                    <el-table-column label="标题" >
                        <template slot-scope="scope">
                            <p v-text="scope.row.title"></p>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="customDel(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col class="elCol" :span="4"></el-col>
            <el-col class="elCol" :span="16">
                <el-select v-model="courseAdd" filterable placeholder="请选择" size="100%" :clearable="true" @visible-change="courseSize">
                    <el-option v-for="val in courseAddList" :key="val.id" :label="val.name" :value="val.id"></el-option>
                </el-select>
            </el-col>
            <el-col class="elCol" :span="4">
                <el-button class="addButton" @click="customAnalyzeBot">添加课程</el-button>
            </el-col>
        </el-row>
        <el-row class="elRow" :gutter="20" v-else></el-row>
    </div>
</template>
<script>
    /**
     *@fileName: app首页设置通用组件
     *author: 陈国盼
     *time: 2017/11/11
     *disc:
    **/
    import {analysisList,courseList,sectionList} from '../../api/api';
    export default {
        props:['message'],
        data() {
            return {
                typeListAll: [
                    {value: 0, label: '不操作'},
                    {value: 1, label:'打开链接'},
                    {value: 10, label:'打开分析列表'},
                    {value: 11, label:'打开分析详情'},
                    {value: 20, label:'打开课节详情'},
                    {value: 21, label:'打开课程列表'},
                    {value: 22, label:'打开自定义课程列表'},
                    {value: 30, label:'打开活动列表'},
                    {value: 31, label:'打开学股堂'},
                    {value: 32, label:'打开模拟炒股'},
                    {value: 40, label:'打开证券开户列表'},
                ],
                options: [
                    {value: 1, label: '大咖论市'},
                    {value: 2, label: '股民选股'},
                    {value: 3, label: '投资策略'}
                ],
                optionsValue: [],
                site: '',
                analyze: [],
                course: [],
                analyzeAdd: [],
                analyzeAddList: {},
                courseAdd: '',
                courseAddList: {},
                lessonsAdd: [],
                lessonsAddList: {},
                customAnalyze: [],
            }
        },
        methods: {
            //分析
            analyzeSize(fus){
                if(fus){
                    analysisList({page: 1, size: 99999, data: {id: null, body: '',type:10000}}).then((res) => {
                        this.analyzeAddList = res.data.content;
                    });
                }
            },
            analyzeBot(){
                if(this.analyze.length>0){this.$message({message: '已有数据,未完成添加', type: 'error'});return;}
                let obj = {};
                obj = this.analyzeAddList.find((item)=>{return item.id === this.analyzeAdd;});
                this.analyze.push({id: this.analyzeAdd, title: obj.title});
                this.message.value = this.analyze[0].id+'';
            },
            tableDel(){
                this.analyze = [];
                this.message.value = '';
            },
            //课程
            courseSize(fus){
                if(fus){
                    courseList({page: 1, size: 99999, data: {type: 0,status:1}}).then((res) => {
                        this.courseAddList = res.data.content;
                    });
                }
            },
            courseBot(){
                if(this.analyze.length>0){this.$message({message: '已有数据,未完成添加', type: 'error'});return;}
                let obj = {};
                obj = this.courseAddList.find((item)=>{return item.id === this.courseAdd;});
                this.analyze.push({id: this.courseAdd, title: obj.name});
                this.message.value = this.analyze[0].id+'';
            },
            customAnalyzeBot(){
                let obj = {};
                this.message.value = '';
                obj = this.courseAddList.find((item)=>{return item.id === this.courseAdd;});
                for (let i = 0; i < this.customAnalyze.length; i++){
                    if(this.customAnalyze[i].id === obj.id){
                        this.$message({message: '已添加过这条数据!', type: 'error'});
                        return;
                    }
                }
                this.customAnalyze.push({id: this.courseAdd, title: obj.name});
                for (let i = 0; i < this.customAnalyze.length; i++){
                    if(i === 0){
                        this.message.value +=  this.customAnalyze[i].id + '';
                    }else{
                        this.message.value +=  ',' + this.customAnalyze[i].id;
                    }
                }
            },
            customDel(row){
                this.message.value = '';
                for (let i = 0; i < this.customAnalyze.length; i++){
                    if(this.customAnalyze[i].id === row.id){
                        this.customAnalyze.splice(i,1);
                    }
                }
                for (let i = 0; i < this.customAnalyze.length; i++){
                    if(i === 0){
                        this.message.value +=  this.customAnalyze[i].id + '';
                    }else{
                        this.message.value +=  ',' + this.customAnalyze[i].id;
                    }
                }
            },
            //课节
            lessonsSize(fus){
                if(fus){
                    sectionList({page: 1, size: 99999, data: {type: 1}}).then((res) => {
                        this.lessonsAddList = res.data.content;
                    });
                }
            },
            lessonsBot(){
                if(this.analyze.length>0){this.$message({message: '已有数据,未完成添加', type: 'error'});return;}
                let obj = {};
                obj = this.lessonsAddList.find((item)=>{return item.id === this.lessonsAdd;});
                this.analyze.push({id: this.lessonsAdd, title: obj.name});
                this.message.value = this.analyze[0].id+'';
            },
            asdasd(){
                this.analyze = [];
                this.message.value = '';
                this.customAnalyze = [];
            },
            typeValue(s){
                let ss ='';
                for (let i = 0; i < s.length; i++){
                    if (i===s.length-1) {ss += (s[i]);}
                    else{ss += (s[i] + ',')}
                }
                this.message.value = ss + '';
            },
            /*
            * 组件第一次被加载
            * */
            operation(){
                const val = this.message;
                this.analyze = [];
                this.customAnalyze = [];
                console.log(val)
                if(typeof (val.id) !== 'undefined'){
                    this.analyze.push({id: val.extra.id, title:  val.extra.title});
                }
                if(this.message.type === 10){
                    let fs = this.message.value.split(",");
                    for (let i = 0;i<fs.length;i++){
                        fs[i] = Number(fs[i]);
                    }
                    this.optionsValue = fs;
                }
                if(this.message.type === 22){
                    for (let i = 0; i < this.message.extra.list.length; i++){
                        this.customAnalyze.push({id: this.message.extra.list[i].id, title: this.message.extra.list[i].title});
                    }
                }
            },

        },
        watch: {
            message(val, oldVal){
                if(val !== oldVal){
                    this.analyze = [];
                    this.customAnalyze = [];
                    setTimeout(() => {
                        if(typeof (val.id) !== 'undefined'){
                            this.analyze.push({id: val.extra.id, title:  val.extra.title});
                        }
                        if(val.type === 10){
                            let fs = val.value.split(",");
                            for (let i = 0;i<fs.length;i++){
                                fs[i] = Number(fs[i]);
                            }
                            this.optionsValue = fs;
                        }
                        if(val.type === 22){
                            for (let i = 0; i < val.extra.list.length; i++){
                                this.customAnalyze.push({id: val.extra.list[i].id, title: val.extra.list[i].title});
                            }
                        }
                    },100);
                }
            }
        },
        mounted(){
            this.operation();
        }
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #types{
        .elRow{
            height: 36px;
            .text-right{
                text-align: right;
            }
            .text-left{
                text-align: left;
            }
            .elCol{
                line-height: 36px;
                margin-bottom: 20px;
                :last-of-type{
                    margin-bottom: 0;
                }
                .addButton{
                    width: 100%;
                }
                .elOption{
                }
                .el-input{
                    width: 100%;
                }
            }
        }
        td{
            p{
                margin: 0;
            }
        }
    }
</style>